<script setup>
import { useSelectIns } from '@/store/zdwh.js';
import InsMgTree from './components/InsMgTree.vue';
import InsInfo from './components/InsInfo.vue';
import InsBuild from './components/InsBuild.vue';
import DeviceSystTree from './components/DeviceSystTree.vue';
import MeasureInfo from './components/MeasureInfo.vue';
import TopologyTree from './components/TopologyTree.vue';

const activeName = ref('baseInfo');
const selectInsStore = useSelectIns();
const checkedChange = check => {
  selectInsStore.setSelectIns(check);
};
</script>
<template>
  <div class="app-container">
    <el-tabs class="u-base-fg" v-model="activeName">
      <el-tab-pane label="基础信息" name="baseInfo" />
      <el-tab-pane label="建筑树结构" name="building" />
      <el-tab-pane label="设备系统结构" name="deviceSys" />
      <el-tab-pane label="计量表信息" name="gauges" />
      <el-tab-pane label="表计拓扑" name="topology" />
    </el-tabs>
    <div class="architecture-box u-mt20 u-df-spb">
      <div class="architecture-left u-h100 u-base-fg u-mr20">
        <InsMgTree
          :isEdit="activeName === 'baseInfo' ? true : false"
          @checkedChange="checkedChange"
          :isDefaultSelect="true"
        />
      </div>
      <div class="architecture-right u-h100">
        <InsInfo v-if="activeName === 'baseInfo'" />
        <InsBuild v-if="activeName === 'building'" />
        <DeviceSystTree v-if="activeName === 'deviceSys'" />
        <MeasureInfo v-if="activeName === 'gauges'" />
        <TopologyTree v-if="activeName === 'topology'" />
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
::v-deep .el-tabs {
  &.el-tabs--top {
    .el-tabs__header {
      margin: 0;
    }
    .el-tabs__item.is-top:nth-child(2) {
      padding-left: 20px;
    }
  }
}
</style>
<style lang="scss">
.repeatRow {
  .el-table__cell {
    background: #1b2b4a !important;
  }
}
</style>
